Paramiliar Design Studios Redefining Innovation and Excellence Design Services, website, build, cost effective, World Wide Web Consortium, browser compatability, website renovation

Optimising Images for use on the Internet

Posted By : mattyb 30th Nov 2006

You would be amazed how many websites do not optimise their images properly, this can result in slow speeds for the visitor which is something you can not afford.

When publishing your images on the World Wide Web you have to make a compromise between quality and speed for instance you can’t have a company logo which is 100Kb in size as this will take too long to download.

So how can you optimise your images? Well first you need to understand the differences in the image formats.

JPEG Images

This image format is a lossy format. This means once the image is downloaded it is decompressed into memory and displayed, this format is ideal for most photos, drawings and high colour concentrated images.

GIF Images

This format consists of a grid of tiny pixel squares, this is a lossless format as unlike JPEG nothing is decompressed it contains all the information and colours in the file. GIF images can also contain transparent pixels which make these images ideal as overlay images. With the GIF format there are multiple options for the amount of colours to use in the image with a maximum of 256 colours so this format is not ideal for photos. Another good feature of GIF’s is that they can be animated

PNG Images

This format was created to become the new and improved GIF format. The format of PNG is a happy medium between JPEG’s and GIF’s as you can hold a greater number of colours while still allowing the use of transparent pixels. So why not use PNG’s for everything you ask? Well because not all browsers support the PNG format correctly.

Now that you understand the differences in the image formats it is time to get to work.

Saving your work for the World Wide Web

To save your work for the World Wide Web in Photoshop select the File menu and select save for web. Most graphics editors have a similar feature to this. Once you are in the feature along the top you will see various tabs, select the 2Up view as this will show you both the original and the optimised image.

Photo's

For most photo’s you will be using the JPEG format as this gives you the best support for the amount of colours whilst being low in size. In the preset drop down in the top right hand corner (image 1) select JPEG High. Now you can look at the image size and the time it will take to load in the bottom left corner of the screen (image 2) you can also change this from 28.8 to 56.6 by right clicking on the speed and selecting the 56.6 / ISDN speed. This will help you get a minimum time to download that image. To help you choose the output file size we have developed the following ideal file size chart.

Image Type	Ideal File Size	Maximum File Size
Background Image	2Kb	5Kb
Layout Header	15 to 20Kb	35 to 40Kb
Artworks	Any	Any
Product Images / General Page Images	10 to 20Kb	30Kb